<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>设置人员数据分配方式 </span>
      <el-tooltip class="item" effect="dark" content="轮流分配：每人一条，依次分配；一次性分配：一次性先满足权重值高的，依次向下分配" placement="right">
        <i class="el-icon-warning-outline" style="color: #409eff"></i>
      </el-tooltip>
    </div>
    <div class="text item" v-loading="loadingType">
      <el-form ref="form" label-width="130px">
        <el-form-item label="分配上限">
          <el-row :gutter="10">
            <el-col :span="5" class="mar-10" v-for="(item,i) in typeArr">
              <el-input type="number" v-model="item.limitNum" placeholder="条数">
                <template slot="prepend">{{item.name}}</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="数据分配方式">
          <el-radio-group v-model="typeRadio">
            <el-radio label="1">轮流分配</el-radio>
            <el-radio label="2">一次性分配</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="typeRadio === '2'">
          <el-row :gutter="10">
            <el-col :span="5" class="mar-10" v-for="(item,i) in typeArr_er">
              <el-input type="number" v-model="item.num" placeholder="条数">
                <template slot="prepend">{{item.name}}</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row style="text-align: center">
          <el-form-item>
            <el-button type="primary" @click="getDataTypeSub">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { RootIndexTypeInit, RootIndexTypeSub } from '../../../../api/index';
export default {
  data() {
    return {
      loadingType: true,
      typeRadioId: "",
      typeRadio: "1",
      typeArr: [],
      typeArr_er: [],
    };
  },
  watch: {
    $route: 'getDataTypeInit',
  },
  created() {
    this.getDataTypeInit();
  },
  methods: {
    //获取分配方式初始化数据
    getDataTypeInit() {
      RootIndexTypeInit().then((res) => {
        this.loadingType = false;
        if (res.code === 0) {
          this.typeRadio = res.config.scValue;
          this.typeRadioId = res.config.scId;
          if (res.userDataLimitNum) {
            res.userDataLimitNum.forEach((item, i) => {
              this.typeArr.push({
                name: item.name,
                id: item.id,
                limitNum: item.userDataNumVo.udnNum,
              })
            })
          }
          if (res.userDataNum) {
            res.userDataNum.forEach((item, i) => {
              this.typeArr_er.push({
                name: item.name,
                id: item.id,
                num: item.userDataNumVo.udnNum,
              })
            })
          }
        } else {
          this.$message(res.msg);
        }
      });
    },
    //提交分配方式设置
    getDataTypeSub() {
      this.loadingType = true;
      let configParam = {
        config: {
          scId: this.typeRadioId,
          scValue: this.typeRadio
        },
        type: '1',
        userDataNumList: [],
        userDataLimitNumList: []
      }
      if (this.typeArr_er) {
        this.typeArr_er.forEach((item, i) => {
          configParam.userDataNumList.push({
            udnUserId: item.id,
            udnNum: item.num,
          })
        })
      }
      if (this.typeArr) {
        this.typeArr.forEach((item, i) => {
          configParam.userDataLimitNumList.push({
            udnUserId: item.id,
            udnNum: item.limitNum,
          })
        })
      }
      RootIndexTypeSub(configParam).then((res) => {
        this.loadingType = false;
        if (res.code === 0) {
          this.$message.success("设置成功");
        } else {
          this.$message(res.msg);
        }
      });
    },
  }
};
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}
.mar-10 {
    margin-bottom: 10px;
}
</style>
